/** 卡片大小 */
.article-list .article-card{
    width: 350px;
    height: 450px;
    margin-top: 10px;
    opacity: 0.8;
}

/** 卡片鼠标悬浮 */
.article-list .article-card:hover{
    /** 元素上移 */
    transform: translateY(-20px);
    /** 鼠标小手 */
    cursor:pointer;
}

/** 卡片图片大小 */
.article-list .article-card .article-card-img{
    width: 100%;
    height: 250px;
}

/** 卡片内容 */
.article-info{
    margin-left: 12px;
    margin-right: 2px;
}

/** 卡片标题 */
.article-info>div:nth-child(1){
    font-size: 1.5em;
    overflow: hidden;
    font-weight: bolder;
    height: 65px;
    /** 显示的行数 */
    -webkit-line-clamp: 2;
    /** 超出部分省略号 */
    text-overflow: ellipsis;
    /** 对象作为伸缩盒子模型显示 **/
    display: -webkit-box;
    /** 显示的行数 */
    -webkit-box-orient: vertical;
}

/** 卡片 footer */
.article-info>div:nth-child(3){
    margin-top: 1em;
    text-align: right;
}

/** 卡片 span元素 */
.article-info>div:nth-child(3) span{
    padding-left: 10px;
}

.article-info>div:nth-child(3) span:hover{
    color: #8e44ad;
}

/** 卡片标题鼠标悬浮 */
.article-info>div:nth-child(1):hover{
    color: #27ae60;
}
/** 卡片内容简介 */
.article-info>p{
    height: 56px;
    overflow: hidden;
    /** 超出部分省略号 */
    text-overflow: ellipsis;
    /** 对象作为伸缩盒子模型显示 **/
    display: -webkit-box;
    /** 显示的行数 */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: #252121;
    font-family: cursive;
    margin-top: 1em;
}

/** 分页 */
.pagination{
    margin-top: 10px;
    display: flex;
    justify-content: center;
}


.article-list .article-card .article-card-img,
.article-list .article-card .article-card-img:hover{
    /** 动画效果 */
    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

/** 卡片图片鼠标悬浮 */
.article-list .article-card .article-card-img:hover{
    /** 变灰色 */
    filter: grayscale(100%);
}
